import React, { useRef, useState } from "react";
import { Button, DatePicker, Form, Input, Space, Tabs } from "antd";
import { useModel } from "@umijs/max";
import OrderVerifyTable from "./OrderVerifyTable";
import { useComponentDidMount } from "@/hooks";
import { fetchOrderCheckRecordTabNum } from '../services';

const {Item} = Form;


const OrderVerify = () => {
  const [form] = Form.useForm();
  const allRef = useRef();
  const waitOrderRef = useRef();
  const orderedRef = useRef();
  const canceledRef = useRef();
  const [activeKey, setActiveKey] = useState<string>('waitCheckNum');
  const [tabNum, setTabNum] = useState<any>({all: 0, authed: 0, waitOrder: 0, ordered: 0, canceled: 0});
  const [searchValue, setSearchValue] = useState({});
  const initValues = {
    destType: '1'
  }
  const {getDict} = useModel('dictModel');
  const prdType = getDict('prdType');
  const sport = getDict('sport');
  const dport = getDict('dport');

  const getParams = () => {
    const params = form.getFieldsValue();
    if (params.orderTime?.length > 0) {
      params.orderTimeBegin = params?.orderTime[0]?.format('YYYY-MM-DD');
      params.orderTimeEnd = params?.orderTime[1]?.format('YYYY-MM-DD');
      delete params.orderTime;
    }
    return params;
  }

  const fetchTabNum = async () => {
    const res = await fetchOrderCheckRecordTabNum(getParams());
    setTabNum({
      totalNum: res?.totalNum || 0,
      waitCheckNum: res?.waitCheckNum || 0,
      checkSuccessNum: res?.checkSuccessNum || 0,
      checkFailedNum: res?.checkFailedNum || 0,
    });
  }


  const tabChange = (key: string) => {
    setActiveKey(key);
  }

  const refreshNum = () => {
    fetchTabNum();
  }

  const search = () => {
    setTimeout(() => {
      const refObj = tabList.find(v => v.key === activeKey)?.comRef;
      refObj?.current?.refreshTable();
    }, 0)
  }
  const handleSearch = () => {
    setSearchValue(getParams());
    search();
    refreshNum();
  }
  const handleReset = () => {
    form.resetFields();
    setSearchValue({});
    search();
    refreshNum();
  }

  const childrenProps: {refreshNum: any; activeKey: string; searchValue: any;} = {
    refreshNum,
    activeKey,
    searchValue
  }
  const tabList: Array<any> = [
    {
      title: '全部',
      key: 'totalNum',
      label: tabNum?.totalNum > 0 ? `全部 ( ${ tabNum?.totalNum} )` : '全部',
      comRef: allRef,
      children: <OrderVerifyTable {...childrenProps} tabKey="totalNum" ref={allRef} />,
    },
    {
      title: '待审核',
      key: 'waitCheckNum',
      label: tabNum?.waitCheckNum > 0 ? `待审核 ( ${ tabNum?.waitCheckNum} )` : '待审核',
      comRef: waitOrderRef,
      children: <OrderVerifyTable {...childrenProps} tabKey="waitCheckNum" ref={waitOrderRef} />,
    },
    {
      title: '审核通过',
      key: 'checkSuccessNum',
      label: tabNum?.checkSuccessNum > 0 ? `审核通过 ( ${ tabNum?.checkSuccessNum} )` : '审核通过',
      comRef: orderedRef,
      children: <OrderVerifyTable {...childrenProps} tabKey="checkSuccessNum" ref={orderedRef} />,
    },
    {
      title: '审核不通过',
      key: 'checkFailedNum',
      label: tabNum?.checkFailedNum > 0 ? `审核不通过 ( ${ tabNum?.checkFailedNum} )` : '审核不通过',
      comRef: canceledRef,
      children: <OrderVerifyTable {...childrenProps} tabKey="checkFailedNum" ref={canceledRef} />,
    },
  ];


  useComponentDidMount(() => {
    fetchTabNum();
  });
  
  return (
    <>
      <Form form={form} initialValues={initValues} layout="inline" >
        <Item name="orderCode" label="订单号" style={{marginBottom: 15}}>
          <Input onPressEnter={handleSearch} />
        </Item>
        <Item name="exOrderCode" label="外部单号" style={{marginBottom: 15}}>
          <Input />
        </Item>
        <Item name="customerName" label="下单公司" style={{marginBottom: 15}}>
          <Input />
        </Item>
        <Item name="salesName" label="下单销售" style={{marginBottom: 15}}>
          <Input />
        </Item>
        
        <Item>
          <Space>
            <Button type="primary" onClick={handleSearch}>查询</Button>
            <Button type="default" onClick={handleReset}>重置</Button>
          </Space>
        </Item>
      </Form>
      <Tabs
        activeKey={activeKey}
        onChange={tabChange} 
        items={tabList}
      />
    </>
  );
};


export default OrderVerify;